import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';

/// Created by XieXin on 2020/11/2.
/// 单图片预览
class SinglePicturePreviewPage extends StatelessWidget {
  final String? image;
  final ImageProvider? imageProvider;
  final BoxDecoration? backgroundDecoration;
  final dynamic minScale;
  final dynamic maxScale;
  final String heroTag;
  final bool enableRotation;

  const SinglePicturePreviewPage({
    Key? key,
    this.image,
    this.imageProvider,
    this.backgroundDecoration, //背景修饰
    this.minScale, //最大缩放倍数
    this.maxScale, //最小缩放倍数
    this.heroTag = "SinglePicturePreviewPageHeroTag", //hero动画tagid
    this.enableRotation = false,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        constraints: BoxConstraints.expand(
          height: MediaQuery.of(context).size.height,
        ),
        child: Stack(
          children: <Widget>[
            Positioned(
              top: 0,
              left: 0,
              bottom: 0,
              right: 0,
              child: PhotoView(
                imageProvider: image == null
                    ? imageProvider
                    : CachedNetworkImageProvider(image!),
                loadingBuilder: (context, event) => Center(
                  child: CircularProgressIndicator(
                    value: event == null
                        ? 0
                        : event.cumulativeBytesLoaded /
                            (event.expectedTotalBytes ?? 0),
                  ),
                ),
                backgroundDecoration: backgroundDecoration,
                minScale: minScale,
                maxScale: maxScale,
                heroAttributes: PhotoViewHeroAttributes(tag: heroTag),
                enableRotation: enableRotation,
              ),
            ),
            Positioned(
              //右上角关闭按钮
              right: 10,
              top: MediaQuery.of(context).padding.top,
              child: IconButton(
                icon: Icon(
                  Icons.close,
                  size: 30,
                  color: Colors.grey[200],
                ),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}

/// Created by XieXin on 2020/11/2.
/// 多图片预览
class MultiPicturePreviewPage extends StatefulWidget {
  final List<String>? images;
  final List<ImageProvider>? imageProviders;
  final int index;
  final String heroTag;
  final bool enableRotation;

  const MultiPicturePreviewPage({
    this.images,
    this.imageProviders,
    this.index = 0,
    this.heroTag = "MultiPicturePreviewPageHeroTag",
    this.enableRotation = false,
  }) : super(key: const Key("MultiPicturePreviewPage"));

  @override
  MultiPicturePreviewPageState createState() =>
      MultiPicturePreviewPageState();
}

class MultiPicturePreviewPageState extends State<MultiPicturePreviewPage> {
  late PageController _controller;
  int _currentIndex = 0;

  @override
  void initState() {
    _controller = PageController(initialPage: widget.index);
    _currentIndex = widget.index;
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    int length = widget.imageProviders != null
        ? widget.imageProviders!.length
        : widget.images!.length;
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Positioned(
            top: 0,
            left: 0,
            bottom: 0,
            right: 0,
            child: PhotoViewGallery.builder(
              scrollPhysics: const BouncingScrollPhysics(),
              builder: (BuildContext context, int index) {
                return PhotoViewGalleryPageOptions(
                  imageProvider: widget.imageProviders != null
                      ? widget.imageProviders![index]
                      : CachedNetworkImageProvider(widget.images![index]),
                  heroAttributes: widget.heroTag.isNotEmpty
                      ? PhotoViewHeroAttributes(
                          tag: "${widget.heroTag}_$index")
                      : null,
                );
              },
              itemCount: length,
              loadingBuilder: (context, event) => Center(
                child: CircularProgressIndicator(
                  value: event == null
                      ? 0
                      : event.cumulativeBytesLoaded /
                          (event.expectedTotalBytes ?? 0),
                ),
              ),
              backgroundDecoration: null,
              pageController: _controller,
              enableRotation: true,
              onPageChanged: (index) {
                setState(() {
                  _currentIndex = index;
                });
              },
            ),
          ),
          Positioned(
            //图片index显示
            top: MediaQuery.of(context).padding.top + 15,
            width: MediaQuery.of(context).size.width,
            child: Center(
              child: Text("${_currentIndex + 1}/$length",
                  style: const TextStyle(color: Colors.white, fontSize: 16)),
            ),
          ),
          Positioned(
            //右上角关闭按钮
            right: 10,
            top: MediaQuery.of(context).padding.top,
            child: IconButton(
              icon: const Icon(
                Icons.close,
                size: 30,
                color: Colors.white,
              ),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ),
        ],
      ),
    );
  }
}
